<template>
	<view :class="['qn-page-' + theme]">
		<view class="avatar-view"><image class="imgs" :src="user_info.avatar" alt="" /></view>
		<view class="info-ul">
			<view class="box clearfix">
				<span class="auator float_left">昵称</span>
				<view class="float_left box-val">
					<input type="text" placeholder="请输入昵称" class="inputSty" v-model="edit_info.name" />
					<text class="ibonfont ibonjinru"></text>
				</view>
			</view>
			<view class="box clearfix">
				<span class="auator float_left">用户ID</span>
				<view class="float_left box-val">{{ user_info.id }}</view>
			</view>
			<!-- <view class="box clearfix">
				<text class="auator float_left">真实姓名</text>
				<view class="float_left box-val"><input type="text" placeholder="请输入您的真实姓名" class="inputSty" v-model="userInfo.realNmae" /></view>
			</view> -->
			<view class="box clearfix">
				<text class="auator float_left">电话</text>
				<view class="float_left box-val">{{ user_info.mobile }}</view>
			</view>
		</view>
		<view class="replaConfig btn-li primary-btn" @click="replaceConfig">保存</view>
		<view class="replaLogin btn-li primary-btn-pain" @click="logOut">退出登录</view>
	</view>
</template>

<script>
// import QiniuUpload from '../../components/qiniu/QiniuUpload.vue';
export default {
	data() {
		return {
			user_info: {},
			edit_info: {
				name: '',
				avatar: '',
				mobile: '',
				realNmae: ''
			}
		};
	},

	onLoad() {
		this.getCustomerInfo();
	},
	methods: {
		// 用户详情
		getCustomerInfo() {
			this.$u.api.getCustomerInfo().then(res => {
				this.user_info = res.data;
				this.edit_info.name = res.data.name;
			});
		},
		logOut() {
			uni.showModal({
				title: '退出登录',
				content: '确定要退出登录吗？',
				success: res => {
					if (res.confirm) {
						uni.clearStorageSync();
						this.$store.commit('commit_hasLogin', false);
						this.goPage('/pages/user/index', 'switchTab');
					}
				}
			});
		},
		// 重新设置
		async replaceConfig() {
			this.$u.api
				.editCustomerInfo({
					avatar: this.user_info.avatar,
					name: this.edit_info.name
				})
				.then(res => {
					this.$u.toast('修改成功');
					this.backPage();
				});
		},

		// 上传图片
		uploadSuccess(res) {
			const uploadPicUrl = `${webUrl.QINIU_URL}/${res.key}`;
			// console.log(res.key, uploadPicUrl);
			this.userInfo.avatar = uploadPicUrl;
		}
	}
};
</script>

<style lang="scss">
.avatar-view {
	text-align: center;
	padding: 30rpx 0;
	background-color: #ffffff;
	margin-bottom: 20upx;
	.imgs {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
	}
}
.btn-li {
	width: 680upx;
	height: 80upx;
	background-color: $uni-color-primary;
	text-align: center;
	line-height: 80upx;
	color: #ffffff;
	border-radius: 12upx;
	margin: 30upx auto;
}
.replaLogin {
	border: 1px solid $uni-color-primary;
	color: $uni-color-primary;
	background-color: transparent;
}
.info-ul {
	background: #fff;
	padding: 0 20upx;
	.box {
		height: 100upx;
		border-bottom: 1upx solid #f4f4f4;
		line-height: 100upx;
		padding: 0 20upx;
		font-size: 28upx;

		.auator {
			width: 150upx;
			color: $font-color-base;
		}

		.box-val {
			height: 100%;
			line-height: 100upx;
			.ibonjinru {
				color: #999999;
			}
			.inputSty {
				display: inline-block;
				line-height: 100upx;
				height: 100upx;
				font-size: 28upx;
				vertical-align: middle;
				width: 480upx;
			}
		}
		&:last-child {
			border-bottom: 0 none;
		}
	}
}
</style>
